/**
 * @description 导出组件
 * @author hly
 */

import React, { Component } from 'react';
import * as XLSX from 'xlsx/xlsx';
import XLSXS from 'xlsx-js-style';
import { PrimaryGhostC } from '../../../comps';
import PropTypes from 'prop-types';
import moment from 'moment';

import FileSaver from 'file-saver';

class ExportFrontEndC extends Component {
  // 默认值
  static defaultProps = {
    domId: [], //表格id
    disabled: false, //默认不禁止
    search: {}, // 导出条件
    style: {}, // 样式
    title: '导出', // 标题
    fileTitle: 'test', // 导出excel文件名称
    ColOption: [], // 导出excel文件列配置项（默认无）
    columns: [], //
    headerColor: 'e2eaf8', //表头背景色
    headerBgNum: [], // 表头背景，有需要前两行就是12 三行就是123，多表格[1,1,123]
    clickFlag: () => {},
    sheetName: [], // sheet名称，对应相应的domId，可不传展示sheet1...
  };
  state = {};
  componentDidMount() {
    this.props.onRef && this.props.onRef(this);
  }
  UNSAFE_componentWillReceiveProps(nextProps) {}
  // 字符串转ArrayBuffer
  s2ab = (s) => {
    var buf = new ArrayBuffer(s.length);
    var view = new Uint8Array(buf);
    for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
    return buf;
  };

  export2 = () => {
    const { domId, fileTitle, fileType, columns, ColOption, sheetName } = this.props;
    this.props?.clickFlag(true); //点击操作开始，通知父组件隐藏一些不需要的dom 比如冻结表头之类的页面
    let sheet = [];
    setTimeout(
      () => {
        var wb = XLSX.utils.book_new(); //新建一个工作簿
        domId.length &&
          domId.map((item, index) => {
            let demo = XLSX.utils.table_to_sheet(document.getElementById(item));
            sheet.push(demo);
            let name = sheetName.length ? sheetName[index] : `sheet${index + 1}`;
            XLSX.utils.book_append_sheet(wb, demo, name); //将工作表添加到工作簿,生成xlsx文件(book,sheet数据,sheet命名)
          });

        // 设置表格样式，!cols为列宽
        const options = {
          '!cols': ColOption,
        };

        // 处理列的数据格式
        let alphabet = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
        // 待处理的列 集合（需要格式处理的列）
        sheet.length &&
          sheet.map((sheetItem, index) => {
            let pendingColumns = [];
            columns[index]?.forEach((item, index) => {
              if (item.type == 'date') {
                // 日期格式
                pendingColumns.push({ alphabet: alphabet[index], t: 'd', z: 'YYYY-MM-DD' });
              } else if (item.type == 'text') {
                pendingColumns.push({ alphabet: alphabet[index], t: 's' });
              } else if (item.type == 'number') {
                pendingColumns.push({ alphabet: alphabet[index], t: 'n' });
              }
              if (item.colorType == 'colorType') {
                pendingColumns.push({ alphabet: alphabet[index], colorType: 'color' });
              }
            });
            for (let k in sheetItem) {
              let bgNum = this.props.headerBgNum[index] || 1;
              // eslint-disable-next-line no-eval
              let headerBgTest = eval('/^[A-Z][' + bgNum + ']$/');
              //设置表头背景色
              if (headerBgTest.test(k)) {
                sheetItem[k].s = {
                  fill: {
                    fgColor: { rgb: this.props.headerColor }, // 添加背景色
                  },
                };
              }
              pendingColumns.forEach((item) => {
                if (k.indexOf(item.alphabet) != '-1' && !(k.indexOf('1') != '-1')) {
                  // 排除表头
                  sheetItem[k].t = item.t;
                  sheetItem[k].z = item.z;
                }
                if (k.indexOf(item.alphabet) != '-1' && !(k.indexOf('1') != '-1') && item.colorType == 'color') {
                  // 设置背景色
                  if (sheetItem[k].v > 1000) {
                    //红色
                    sheetItem[k].s = {
                      fill: {
                        fgColor: { rgb: 'ff0000' }, // 添加背景色
                      },
                    };
                  } else if (sheetItem[k].v < 1000) {
                    //绿色
                    sheetItem[k].s = {
                      fill: {
                        fgColor: { rgb: '008000' }, // 添加背景色
                      },
                    };
                  }
                }
              });
            }
            sheetItem['!cols'] = options['!cols']; // 设置每列的列宽，10代表10个字符，注意中文占2个字符
            // sheetItem['!merges'] = [{ e: { c: 1, r: 1 }, s: { c: 0, r: 0 } }];//合并单元格
            // sheetItem['A2'].s = {
            //     fill: {
            //         fgColor: { rgb: 'FFA3F4B1' } // 添加背景色
            //     },
            //     font: {
            //         sz: 18,                //18号字体
            //         bold: true,             //加粗
            //         color: {
            //             rgb: 'FF4F81BD'  //字体颜色
            //         },
            //     },
            //     alignment: {
            //         horizontal: 'center'   //水平居中对其
            //     },
            // }
          });

        //写入工作簿
        let wbout = XLSXS.write(wb, { bookType: 'xlsx', bookSST: false, type: 'binary' });
        try {
          FileSaver.saveAs(new Blob([this.s2ab(wbout)], { type: 'application/octet-stream' }), `${fileTitle}.${fileType || 'xlsx'}`);
        } catch (e) {
          if (typeof console !== 'undefined') console.log(e, wbout);
        }
        this.props.clickFlag(false); //写入之后 告知父组件
        return wbout;
      },
      this.props?.clickFlag ? 300 : 0,
    );
  };

  render() {
    const { disabled, style, title } = this.props;

    return (
      <>
        <div></div>
        <div style={style}>
          <PrimaryGhostC title={title} disabled={disabled} onClick={this.export2} />
        </div>
      </>
    );
  }
}
// props默认值
ExportFrontEndC.propsTypes = {
  domId: PropTypes.array, // 表格id
  search: PropTypes.object, // 导出条件
  disabled: PropTypes.bool, // 禁用
  style: PropTypes.object, // 样式
  title: PropTypes.string, // 标题
  ColOption: PropTypes.array, // 导出excel文件列配置项,[{ wpx: 100 },{ wpx: 100 },]
  columns: PropTypes.array, // 导出excel表头,[[{ title: 'Name', key: 'name' },}],columns]
};

export default ExportFrontEndC;
